<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色管理</title>
		<link href="../../component/pear/css/pear.css" rel="stylesheet" />
	</head>
	<body class="pear-container">
	<!--信息展示表格-->
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="role-table" lay-filter="role-table"></table>
			</div>
		</div>
		<!--新增/批量删除组件-->
		<script type="text/html" id="role-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
				<i class="layui-icon layui-icon-add-1"></i>
				新增
			</button>
			<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
				<i class="layui-icon layui-icon-delete"></i>
				删除
			</button>
		</script>
		<!--修改/删除组件-->
		<script type="text/html" id="role-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
			<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>
	<!--新增/修改表单组件-->
	<div style="display: none" id="showRole">
		<form class="layui-form" action="" lay-filter="roleForm">
			<input type="hidden" name="roleId" id="roleId">
			<div class="mainBox">
				<div class="main-container">
					<div class="main-container">
						<div class="layui-form-item">
							<label class="layui-form-label">角色</label>
							<div class="layui-input-block">
								<input type="text" name="authority" id="authority" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">描述</label>
							<div class="layui-input-block">
								<input type="text"  name="details"id="details" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="role-submit">
						<i class="layui-icon layui-icon-ok"></i>
						提交
					</button>
					<button type="reset" class="pear-btn pear-btn-sm">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</form>
	</div>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
		    layui.use(['table','form','jquery'],function () {
		        let table = layui.table;
		        let form = layui.form;
		        let $ = layui.jquery;
		        let MODULE_PATH = "http://47.93.226.229:8080/auths/";
		        let cols = [
		            [
		                {type:'checkbox'},
						{title:'序号',field: 'roleId',align: 'center',width:300},
		                {title: '角色名', field: 'authority', align:'center', width:100},
		                {title: '描述', field: 'details', align:'center'},
		                {title: '操作', toolbar: '#role-bar', align:'center', width:195}
		            ]
		        ]

		        table.render({
		            elem: '#role-table',
		            url: 'http://47.93.226.229/selectAuthority',
		            page: true ,
					limit: 5,
					limits: [5, 10, 15, 20],
		            cols: cols ,
		            skin: 'line',
		            toolbar: '#role-toolbar',
		            defaultToolbar: [{
						title: '刷新',
		                layEvent: 'refresh',
		                icon: 'layui-icon-refresh',
		            }, 'filter', 'print', 'exports']
		        });

		        table.on('tool(role-table)', function(obj){
		            if(obj.event === 'remove'){
		                window.remove(obj);
		            } else if(obj.event === 'edit'){
		                window.edit(obj);
		            } else if(obj.event === 'power'){
		                window.power(obj);
		            }
		        });

		        table.on('toolbar(role-table)', function(obj){
		            if(obj.event === 'add'){
		                window.add();
		            } else if(obj.event === 'refresh'){
		                window.refresh();
		            } else if(obj.event === 'batchRemove'){
		                window.batchRemove(obj);
		            }
		        });
		        let index = 0;
		        window.add = function(){
                    index = layer.open({
                        type: 1,
                        title: '新增权限',
                        area: ['500px', '300px'],
                        content: $('#showRole')
                    });
                    form.on('submit(role-submit)', function(data){
						$.post(
								'http://47.93.226.229/addAuthority',
								data.field,
								function (msg) {
									layer.close(index);//关闭当前页
									table.reload("roleForm");
								}
						);
                        layer.close(index);
                    });
		        }
		        window.edit = function(obj){
					let data = obj.data //获得当前行数据
					$.get(
							'http://47.93.226.229/selectAuthorityByid' + data.roleId, function (obj1) {
								index = layer.open({
									type: 1,
									title: '修改权限',
									area: ['500px', '300px'],
									content: $('#showRole')
								});
								content: $("#roleId").val(obj1.data.roleId);
								content: $("#authority").val(obj1.data.authority);
								content: $("#details").val(obj1.data.details);
								form.render();
							});
                    form.on('submit(role-submit)', function(data){
						$.post(
								'http://47.93.226.229/updateAuthorityWithId',
								data.field,
								function (msg) {
									console.log('success');
									layer.close(index);//关闭当前页
									table.reload("roleForm");
								}
						);
                    });
		        }

		        window.remove = function(obj){
					let data = obj.data //获得当前行数据
					let arr = new Array();
					arr.push(data.roleId);
		            layer.confirm('确定要删除该角色', {icon: 3, title:'提示'}, function(index){
						layer.close(index);
						$.ajax({
							url: 'http://47.93.226.229/DeleteAuthorityByids',
							data: {"ids": arr},//data，规定要发送服务器的数据
							dataType: 'json',
							traditional: true,
							type: "GET",//规定请求的类型
							success: function (result) {
								if (result.data > 1) {
									layer.msg(result.msg, {
										icon: 1,
										time: 10
									}, function () {
										obj.del();
									});

								} else {
									layer.msg(result.msg, {
										icon: 2,
										time: 1000
									});
								}

							}

						})
						table.reload("role-table",{
							done: function (res, curr, count) {
								if (curr > 1 && res.data.length === 0) {
									curr = curr - 1;
									table.reload('role-table', {
										page: {
											curr: curr
										},
										where: {
											authority: $("#authority").val(),
											details:$("#details").val(),
										},
									}, 'data');
								}
							}
						});
		            });
		        }

		        window.batchRemove = function(obj){
					let checkStatus = table.checkStatus(obj.config.id)
							, data = checkStatus.data; //获取选中的数据
					let arr = new Array();
					for (let i = 0; i < checkStatus.data.length; i++) {
						arr.push(checkStatus.data[i].roleId);
					}
					if (data.length === 0) {
						layer.msg("未选中数据", {
							icon: 3,
							time: 1000
						});
						return false;
					}
		            layer.confirm('确定要删除这些用户', {
		            	icon: 3, title:'提示'
					}, function(index){
		                layer.close(index);
		                let loading = layer.load();
		                $.ajax({
		                    url: 'http://47.93.226.229/DeleteAuthorityByids',
							data: {"ids": arr},
		                    dataType:'json',
							traditional: true,
		                    type:'GET',
		                    success:function(result){
								layer.close(loading);
								if (result.success) {
									layer.msg(result.msg, {
										icon: 1,
										time: 10
									}, function () {
										obj.del();
									});
								} else {
									layer.msg(result.msg, {
										icon: 2,
										time: 10
									});
								}
		                    }
		                });
						table.reload("role-table");
		            });
		        }

		        window.refresh = function(){
		            table.reload("role-table");
		        }
		    })
		</script>
	</body>
</html>
